<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>时钟</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #2f363e;
        user-select: none;
      }
      .container {
        position: relative;
        background-color: #2f363e;
        border-radius: 20px;
        border-top-left-radius: 225px;
        border-top-right-radius: 225px;
        box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.75),
          10px 10px 70px rgba(0, 0, 0, 0.25),
          inset 5px 5px 10px rgba(0, 0, 0, 0.5),
          inset 5px 5px 20px rgba(255, 255, 255, 0.2),
          inset -5px -5px 15px rgba(0, 0, 0, 0.75);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .clock {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: #2f363e;
        border-radius: 50%;
        box-shadow: 10px 50px 70px rgba(0, 0, 0, 0.25),
          inset 5px 5px 10px rgba(0, 0, 0, 0.5),
          inset 5px 5px 20px rgba(255, 255, 255, 0.2),
          inset -5px -5px 15px rgba(0, 0, 0, 0.75);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
      }
      .clock::before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border: 3px solid #fff;
        border-radius: 50%;
        opacity: 0.8;
        background-color: #ccc;
        z-index: 10;
      }
      .clock span {
        position: absolute;
        inset: 20px;
        color: #fff;
        text-align: center;
        transform: rotate(calc(30deg * var(--i)));
      }
      .clock span b {
        font-size: 2rem;
        font-weight: 600;
        opacity: 0.6;
        display: inline-block;
        transform: rotate(calc(-30deg * var(--i)));
      }

      .circle {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .circle svg {
        position: relative;
        transform: rotate(270deg);
      }

      .circle:nth-child(1) svg {
        width: 250px;
        height: 250px;
      }

      .circle:nth-child(2) svg {
        width: 210px;
        height: 210px;
      }

      .circle:nth-child(3) svg {
        width: 170px;
        height: 170px;
      }

      .circle svg circle {
        width: 100%;
        height: 100%;
        fill: transparent;
        stroke: var(--clr);
        stroke-width: 5;
        transform: translate(5px, 5px);
        opacity: 0.25;
      }

      svg.ss_ring circle {
        stroke-dasharray: 760;
        stroke-dashoffset: 760;
      }

      svg.mm_ring circle {
        stroke-dasharray: 630;
        stroke-dashoffset: 630;
      }

      svg.hh_ring circle {
        stroke-dasharray: 510;
        stroke-dashoffset: 510;
      }

      .dots {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
      }
      .dots::before {
        content: "";
        position: absolute;
        top: -3px;
        width: 15px;
        height: 15px;
        background-color: var(--clr);
        border-radius: 50%;
        box-shadow: 0 0 20px var(--clr), 0 0 60px var(--clr);
      }

      .dots i {
        position: absolute;
        height: 50%;
        transform-origin: bottom;
        border-radius: 50%;
        background-color: var(--clr);
        opacity: 0.7;
        /* 针长度缩小 */
        transform: scaleY(0.5);
      }

      .dots.ss_dot i {
        width: 1px;
      }
      .dots.mm_dot i {
        width: 4px;
      }
      .dots.hh_dot i {
        width: 6px;
      }

      #tick {
        position: absolute;
        top: 60px;
        list-style: none;
      }
      #tick li {
        position: absolute;
        width: 1px;
        height: 6px;
        border-radius: 10px;
        background-color: #fff;
        /*设置li标签的旋转中心和旋转半径。*/
        transform-origin: center 140px;
        opacity: 0.6;
      }
      #tick li:nth-child(5n + 1) {
        height: 12px;
        width: 2px;
        background-color: #fff;
        opacity: 0.8;
      }

      .time {
        margin-bottom: 30px;
        display: flex;
        padding: 10px 20px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
          inset 5px 5px 20px rgba(255, 255, 255, 0.2),
          inset -5px -5px 20px rgba(0, 0, 0, 0.75);
        border-radius: 50px;
        font-size: 1.5rem;
        font-weight: 500;
      }
      .time .digit {
        position: relative;
        width: 60px;
        text-align: center;
        font-weight: 400;
        color: var(--clr);
      }
      .time .digit:nth-child(1)::after,
      .time .digit:nth-child(2)::after {
        content: ":";
        position: absolute;
        left: 100%;
        transform: translateX(-100%);
        color: #fff;
      }
      .time .ampm {
        font-size: 0.6rem;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
    </style>
    <style id="style"></style>
  </head>
  <body>
    <div class="container">
      <div class="clock">
        <div class="circle" style="--clr: #04fc43">
          <div class="dots ss_dot" id="sc">
            <i></i>
          </div>
          <svg class="ss_ring">
            <circle cx="120" cy="120" r="120" id="ss" />
          </svg>
        </div>
        <div class="circle" style="--clr: #fee800">
          <div class="dots mm_dot" id="mn">
            <i></i>
          </div>
          <svg class="mm_ring">
            <circle cx="100" cy="100" r="100" id="mm" />
          </svg>
        </div>
        <div class="circle" style="--clr: #ff2972">
          <div class="dots hh_dot" id="hr">
            <i></i>
          </div>
          <svg class="hh_ring">
            <circle cx="80" cy="80" r="80" id="hh" />
          </svg>
        </div>

        <ul id="tick"></ul>

        <span style="--i: 1"><b>1</b></span>
        <span style="--i: 2"><b>2</b></span>
        <span style="--i: 3"><b>3</b></span>
        <span style="--i: 4"><b>4</b></span>
        <span style="--i: 5"><b>5</b></span>
        <span style="--i: 6"><b>6</b></span>
        <span style="--i: 7"><b>7</b></span>
        <span style="--i: 8"><b>8</b></span>
        <span style="--i: 9"><b>9</b></span>
        <span style="--i: 10"><b>10</b></span>
        <span style="--i: 11"><b>11</b></span>
        <span style="--i: 12"><b>12</b></span>
      </div>
      <div class="time">
        <div class="digit" id="hour" style="--clr: #ff2972">00</div>
        <div class="digit" id="minute" style="--clr: #fee800">00</div>
        <div class="digit" id="second" style="--clr: #04fc43">00</div>
        <div class="ampm">AM</div>
      </div>
    </div>
    <script>
      window.onload = function () {
        const ohr = document.querySelector("#hr");
        const omn = document.querySelector("#mn");
        const osc = document.querySelector("#sc");

        const oHour = document.querySelector("#hour");
        const oMinute = document.querySelector("#minute");
        const oSecond = document.querySelector("#second");
        const oAmPm = document.querySelector(".ampm");
        const is12 = false; // 是否是 12 制数字时钟

        const ohh = document.querySelector("#hh");
        const omm = document.querySelector("#mm");
        const oss = document.querySelector("#ss");

        if (!is12) {
          oAmPm.parentElement.removeChild(oAmPm);
        }

        // 绘制时钟的刻度 动态创建60个 li 标签。
        function createTick() {
          const ul = document.getElementById("tick"); //先获取到ul，因为要在ul下创建li。
          let css; //用来存li的style样式中的CSS设置。
          for (let i = 0; i < 60; i++) {
            //循环设置ul下的第i+1个li的旋转角度，要在css中设置了li的旋转中心
            css += `#tick li:nth-of-type(${i + 1}){transform:rotate(${
              i * 6
            }deg)}`;
            ul.innerHTML += `<li></li>`; //这里要用+=，如果直接用=，只会创建一个li，因为会覆盖前面的li，为了不出现覆盖就用+=。
          }
          document.getElementById("style").innerHTML += css; //把ul下的li标签的css样式写入到style里。
        }
        createTick();

        function setDate() {
          const date = new Date();
          const hh = date.getHours();
          const mm = date.getMinutes();
          const ss = date.getSeconds();

          /*
          //#region
          // 转成 12
          ohh.style.strokeDashoffset = 510 - (510 * (hh % 12)) / 12;
          // 60 分
          omm.style.strokeDashoffset = 630 - (630 * mm) / 60;
          // 60 秒
          oss.style.strokeDashoffset = 760 - (760 * ss) / 60;

          // 转成角度
          const hour = (hh * 30) % 360;
          const minute = (mm * 6) % 360;
          const second = (ss * 6) % 360;

          ohr.style.transform = `rotateZ(${hour + minute / 60}deg)`;
          omn.style.transform = `rotateZ(${minute}deg)`;
          osc.style.transform = `rotateZ(${second}deg)`;
          //#endregion
          */

          //#region
          // 转成 12
          ohh.style.strokeDashoffset = 510 - (510 * (hh % 12)) / 12;
          // 60 分
          omm.style.strokeDashoffset = 630 - (630 * mm) / 60;
          // 60 秒
          oss.style.strokeDashoffset = 760 - (760 * ss) / 60;

          //获取时间。
          const second = ss; //获取现在是多少秒。
          const minute = mm + second / 60; //获取现在是多少分，加上 秒数/60。
          const hour = hh + minute / 60; //获取现在是多少时，加上 分钟数/60。

          osc.style.transform = `rotate(${second * 6}deg)`; //设置的trasnform就可以让它们旋转起来，秒针时一秒旋转6度。
          omn.style.transform = `rotate(${minute * 6}deg)`; //分针也是一分钟旋转6度。
          ohr.style.transform = `rotate(${hour * 30}deg)`; //这里是小时，一小时旋转30度，所以*30.
          //#endregion

          const ampm = hour > 12 ? "PM" : "AM";

          let h = hh;
          let m = mm;
          let s = ss;
          if (h > 12 && is12) {
            h = h - 12;
          }

          h = h < 10 ? "0" + h : h;
          m = m < 10 ? "0" + m : m;
          s = s < 10 ? "0" + s : s;

          oHour.innerText = h;
          oMinute.innerText = m;
          oSecond.innerText = s;
          oAmPm.innerText = ampm;
        }

        setDate();
        setInterval(setDate, 1000);
      };
    </script>
  </body>
</html>
